<template>
  <div class="app-container">
    <el-card class="box-card search-div">
      <el-form :inline="true">
        <el-form-item label="流程名称">
          <el-input placeholder="请输入查询的流程名称" v-model="searchName"/>
        </el-form-item>
        <el-button type="primary" @click="handleSearch" icon="el-icon-search">搜索</el-button>
        <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleSearch">
          <el-tab-pane label="待部署流程" name="first">
              <el-table :data="undeployList" v-loading.body="undeployListLoading" border fit highlight-current-row class="table-list">
                  <el-table-column align="center" label="流程名称" prop="name"/>
                  <el-table-column align="center" label="流程标识" prop="modelKey"/>
                  <el-table-column align="center" label="流程版本" prop="version" width="80">
                      <template slot-scope="scope">
                          <el-tag>v{{scope.row.version}}</el-tag>
                      </template>
                  </el-table-column>
                  <el-table-column align="center" label="修改时间" prop="lastUpdated" width="150"/>
                  <el-table-column class-name="status-col" label="状态" width="70">
                      <el-tag type="danger">待部署</el-tag>
                  </el-table-column>
                  <el-table-column align="center" label="操作" width="160" fixed="right">
                      <template slot-scope="scope">
                      <el-button plain v-hasPermi="['flowable_modeler_deploy']" type="success" @click="showDeployDialog(scope.row,0)">部署</el-button>
                      <el-button plain v-hasPermi="['flowable_modeler_delete']" type="danger" @click="deleteModelById(scope.row.id)">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="pagination-container">
                  <el-pagination background @size-change="handleUndeploySizeChange" @current-change="handleUndeployCurrentChange" :current-page="listUndeployQuery.page"
                      :page-sizes="[10,20,30,50]" :page-size="listUndeployQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="undeployTotal">
                  </el-pagination>
              </div>
          </el-tab-pane>
          <el-tab-pane label="已部署流程" name="second">
              <el-table :data="deployList" v-loading.body="deployListLoading" border fit highlight-current-row class="table-list">
                  <el-table-column align="center" label="流程名称" prop="name"/>
                  <el-table-column align="center" label="流程标识" prop="modelKey"/>
                  <el-table-column align="center" label="流程类型" prop="category" width="150">
                    <template slot-scope="scope">
                      {{formatFlowableModeTypeName(scope.row.category)}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="部署时间" prop="deployTime" width="150"/>
                  <el-table-column class-name="status-col" label="状态" width="70">
                      <el-tag>已部署</el-tag>
                  </el-table-column>
                  <el-table-column align="center" label="操作"  width="380">
                      <template slot-scope="scope">
                        <el-button plain v-hasPermi="['flowable_modeler_deploy']" v-if="scope.row.repeatDeploy" type="violet" @click="showDeployDialog(scope.row,1)">重新部署</el-button>
                        <el-button plain v-hasPermi="['flowable_user_binding']" type="success" @click="openBingdingDialog(scope.row)">流程授权</el-button>
                        <el-button plain v-hasPermi="['flowable_modeler_undeploy']" type="warning" @click="handleUndeploy(scope.row.id)">撤销</el-button>
                        <el-button plain v-hasPermi="['flowable_diagram']" type="info" @click="viewDiagram(scope.row)">流程图</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="pagination-container">
                  <el-pagination background @size-change="handleDeploySizeChange" @current-change="handleDeployCurrentChange" :current-page="listDeployQuery.page"
                      :page-sizes="[10,20,30,50]" :page-size="listDeployQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="deployTotal">
                  </el-pagination>
              </div>
          </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="选择流程类型" :width="'400px'" :visible.sync="showDialog" :close-on-click-modal="false">
      <el-form :rules="rules" ref="selectModelTypeData" :model="selectModelTypeData" label-width="80px">
        <el-form-item label="流程类型" prop="flowModelTypeId">
          <el-select v-model="selectModelTypeData.flowModelTypeId" filterable placeholder="请流程类型选择">
            <el-option
              v-for="item in modelTypeData"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleDeploy()">部 署</el-button>
      </div>
    </el-dialog>
    <el-dialog title="流程图" :width="'800px'" :visible.sync="showDialogDiagram">
        <img :src="flowableImage" v-if="flowableImage" class="flowableImage">
    </el-dialog>

    <el-dialog title="流程授权" :width="'800px'" :visible.sync="showBingdingDialog">
      <el-transfer
        filterable
        filter-placeholder="请输入用户名"
        :titles="['待选用户', '已选用户']"
        v-model="userValue"
        :data="userData">
      </el-transfer>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showBingdingDialog = false">取 消</el-button>
          <el-button type="primary" @click="bingding()">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import * as flowablePublish from './js/flowPublish'
import * as flowableModelType from '../flowCategory/js/flowCategory'
import * as user from '../../system/user/js/user'
import { mapGetters } from 'vuex'

export default {
  name: 'flowablePublishList',
  data() {
    return {
      undeployList: null,
      undeployListLoading: false,
      undeployTotal: 0,
      deployList: null,
      deployListLoading: false,
      deployTotal: 0,
      activeName: 'first',
      searchName: '',
      showDialog: false,
      listUndeployQuery: {
        page: 1, limit: 10, name: ''
      },
      listDeployQuery: {
        page: 1, limit: 10, name: ''
      },
      rules: {
        flowModelTypeId: [{ required: true, message: '请输入流程类型', trigger: 'blur' }]
      },
      selectModelTypeData:{
        modelId:'',modelKey:'',flowModelTypeId:'',type:''
      },
      modelTypeData:[]
      ,showDialogDiagram:false
      ,flowableImage:''
      ,showBingdingDialog:false
      ,curRow:{}
      ,userValue:[]
      ,userData:[]
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  created() {
    this.getUndeployList()
    this.init()
  },
  methods: {
    init(){
      flowableModelType.fetchList({page:1,limit:1000,status:0}).then((response)=>{
        this.modelTypeData = response.data.records
      })
    },
    formatFlowableModeTypeName(id){
      var modelType = this.modelTypeData.filter(function(fp) {
        return fp.id == id
      })
      return modelType[0].typeName;
    },
    getUndeployList() {
      this.undeployListLoading = true
      this.listUndeployQuery.name = this.searchName
      flowablePublish.fetchUndeployList(this.listUndeployQuery).then(response => {
        this.undeployList = response.data.records
        this.undeployTotal = response.data.total
        this.undeployListLoading = false
      })
    },
    getDeployList() {
        this.deployListLoading = true
        this.listDeployQuery.name = this.searchName
        flowablePublish.fetchDeployList(this.listDeployQuery).then(response => {
            this.deployList = response.data.records
            this.deployTotal = response.data.total
            this.deployListLoading = false
        })
    },
    handleSearch() {
        if(this.activeName=='first'){
            this.listUndeployQuery.page = 1
            this.getUndeployList()
        }else{
            this.listDeployQuery.page = 1
            this.getDeployList()
        }
    },
     handleReset(){
     var listQuery = {
        page: 1, limit: 10, typeName: '', status: ''
      }
      this.searchName = ''
      if(this.activeName=='first'){
            this.listUndeployQuery = listQuery
            this.getUndeployList()
        }else{
            this.listDeployQuery = listQuery
            this.getDeployList()
        }
    },
    handleUndeploySizeChange(val) {
        this.listUndeployQuery.limit = val
        this.getUndeployList()
    },
    handleUndeployCurrentChange(val) {
        this.listUndeployQuery.page = val
        this.getUndeployList()
    },
    handleDeploySizeChange(val) {
        this.listDeployQuery.limit = val
        this.getDeployList()
    },
    handleDeployCurrentChange(val) {
        this.listDeployQuery.page = val
        this.getDeployList()
    },
    //选择流程类型
    showDeployDialog(row,type){
      this.showDialog = true
      this.selectModelTypeData.modelId = row.id
      this.selectModelTypeData.modelKey = row.modelKey
      this.selectModelTypeData.type = type

    },
    //部署
    handleDeploy() {
       this.$refs['selectModelTypeData'].validate((valid) => {
        if (valid) {
          if(this.selectModelTypeData.type==0){
            flowablePublish.deployById(this.selectModelTypeData.modelId,this.selectModelTypeData.flowModelTypeId).then((response) => {
              this.$message({ type: 'success', message: '操作成功!' })
              this.showDialog = false
              this.getUndeployList()
            })

          }else{
            flowablePublish.deployByKey(this.selectModelTypeData.modelKey, this.selectModelTypeData.flowModelTypeId).then((response) => {
              this.$message({ type: 'success', message: '操作成功!' })
              this.showDialog = false
              this.getUndeployList()
            })
          }
        }
       })
    },
    //撤销
    handleUndeploy(id) {
      this.$confirm('确认要撤销此流程', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        flowablePublish.undeploy(id).then((response) => {
          this.$message({ type: 'success', message: '操作成功!' })
          this.getDeployList()
        })
      }).catch(function(error) { console.log(error) })
    },
    //删除未部署的
    deleteModelById(id) {
      this.$confirm('确认要删除未部署流程', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        flowablePublish.deleteModelById(id).then((response) => {
          this.$message({ type: 'success', message: '操作成功!' })
          if(this.activeName=='first'){
            this.getUndeployList()
        }else{
            this.getDeployList()
        }
        })
      }).catch(function(error) { console.log(error) })
    },
        //查看流程图
    viewDiagram(row){
      this.showDialogDiagram = true
       flowablePublish.diagram(row.modelKey,row.id).then((response)=>{
            this.flowableImage = response.data
        })
    },
    openBingdingDialog(row){
      this.curRow = row
      this.showBingdingDialog = true
      this.userValue = []
      this.userData=[]
      user.fetchList({page:1,limit:1000,status:0}).then((response)=>{
        var datas = response.data.records
        for (var i = 0; i < datas.length; i++) {
          this.userData.push({'key':datas[i].id,'label':datas[i].userName})
        }
        flowablePublish.getUserIdByBindingModel(row.modelKey,row.category).then((response)=>{
          this.userValue = response.data
        })
      })
    },
    //绑定用户
    bingding(){
      flowablePublish.binding(this.curRow.modelKey,this.userValue).then((response) => {
          this.$message({ type: 'success', message: '操作成功!' })
          this.showBingdingDialog = false
      })
    }
  }
}
</script>
